<template>
	<view>
		<u-navbar title="订单核销" back-icon-color="#000" title-color="#000" :title-bold="true" :immersive="true"
			:border-bottom="false" :background="{background:'none'}"></u-navbar>
		
		<view class="m-head" :style="{paddingTop:navbarHeight+'px'}">
			<view class="m-search">
				<view class="m-search-left" @click="scanCodeFun">
					<image src="../static/qcode.png" mode=""></image>
					<text>扫码</text>
				</view>
				<view class="m-search-line"></view>
				<view class="m-search-right">
					<input type="text" v-model="hexiaoma" placeholder="请输入核销码">
				</view>
			</view>
			<view class="m-head-btn" @click="searchFun">
				<text>搜索</text>
			</view>
		</view>
		
		<block v-if="info">
			<view class="m-title">
				<text>订单信息</text>
			</view>
			
			<view class="m-info">
				<view class="m-cell">
					<view class="m-cell-left">
						<text>订单编号</text>
					</view>
					<view class="m-cell-right">
						<text>{{info.orderId || ''}}</text>
					</view>
				</view>
				<view class="m-cell">
					<view class="m-cell-left">
						<text>下单时间</text>
					</view>
					<view class="m-cell-right">
						<text>{{info.dtTime}}</text>
					</view>
				</view>
				<view class="m-hotel">
					<view class="m-hotel-top">
						<view class="m-hotel-title u-line-1">
							<text>{{info.hotal.title}}</text>
						</view>
						<view class="m-hotel-price">
							<text>{{info.price}}</text>
						</view>
					</view>
					<view class="m-hotel-user">
						<text>{{info.guester_json.name}} {{info.guester_json.phone}}</text>
					</view>
					<view class="m-hotel-text">
						<text>{{get_date('MM月DD日',info.startTime)}} 至 {{get_date('MM月DD日',info.endTime)}} {{info.night_num}}晚</text>
					</view>
					<view class="m-hotel-text">
						<text>{{info.home_json.title}} {{info.num}}间</text>
					</view>
				</view>
			</view>
			<view class="m-button" @click="hexiaoFun">
				<text>确认核销</text>
			</view>
		</block>
		
		<view class="m-empty" v-else>
			<image src="../static/orderempty.png" mode=""></image>
			<view class="">
				<text>暂无结果</text>
			</view>
		</view>
	</view>
</template>

<script>
	// 获取系统状态栏的高度
	let systemInfo = uni.getSystemInfoSync();
	import {get_date,get_timestamp} from "@/common/function/tools.js"
	export default {
		data() {
			return {
				hexiaoma:'',
				info:null
			}
		},
		watch:{
			hexiaoma(val){
				if(!val){
					this.info = null
				}
			}
		},
		computed: {
			// 转换字符数值为真正的数值
			navbarHeight() {
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				return height + systemInfo.statusBarHeight;
			},
			getCountComputed(){
				return (item)=>{
					let start = get_timestamp(item.startTime)
					let end = get_timestamp(item.endTime)
					let count = (end - start) / 24/60/60
					return count
				}
			}
		},
		methods: {
			get_date,
			searchFun(){
				if(!this.hexiaoma){
					return this.$m.msg('请输入核销码')
				}
				uni.showLoading({
					title:'正在查询中...'
				})
				this.$http.getJson('hotal_checkOrder',{hexiaoma:this.hexiaoma}).then(res=>{
					uni.hideLoading()
					if(res.code == 1){
						this.info = res.data
					}else{
						this.info = null
						this.$m.msg(res.message)
					}
				})
			},
			hexiaoFun(){
				if(!this.hexiaoma){
					return this.$m.msg('请输入核销码')
				}
				uni.showLoading({
					title:'正在核销...'
				})
				this.$http.getJson('hotal_hexiao',{hexiaoma:this.hexiaoma}).then(res=>{
					uni.hideLoading()
					if(res.code == 1){
						this.info = null
						this.hexiaoma = ''
					}else{
						this.$m.msg(res.message)
					}
				})
			},
			scanCodeFun(){
				let that = this
				uni.scanCode({
					success: ({result}) => {
						that.hexiaoma = result
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.m-head{
	width: 750rpx;
	height: 566rpx;
	background: linear-gradient( 180deg, #FFF3E6 0%, #F7E5CB 100%);
	.m-search{
		display: flex;
		align-items: center;
		width: 690rpx;
		height: 110rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-left: 30rpx;
		margin-top: 60rpx;
		.m-search-left{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 130rpx;
			font-size: 24rpx;
			color: #34302D;
			line-height: 33rpx;
			image{
				width: 48rpx;
				height: 48rpx;
			}
		}
		.m-search-line{
			width: 1px;
			height: 50rpx;
			background: #E6E3DE;
		}
		.m-search-right{
			flex: 1;
			height: 100%;
			padding: 0 40rpx;
			font-size: 34rpx;
			color: #000;
			input{
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.m-head-btn{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 335rpx;
		height: 104rpx;
		background: #D3A358;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 60rpx auto 0;
		font-size: 32rpx;
		color: #fff;
	}
}

.m-title{
	font-size: 32rpx;
	color: #33302D;
	padding: 48rpx 25rpx 0;
	font-weight: 600;
}

.m-info{
	padding: 30rpx 25rpx;
	.m-cell{
		display: flex;
		align-items: center;
		padding-bottom: 30rpx;
		.m-cell-left{
			width: 135rpx;
			font-size: 26rpx;
			color: #9B958F;
			line-height: 38rpx;
		}
		.m-cell-right{
			font-size: 26rpx;
			color: #33302D;
			line-height: 38rpx;
		}
	}
	.m-hotel{
		border-top: 1px dashed #D3CECA;
		.m-hotel-top{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 30rpx;
			.m-hotel-title{
				font-size: 28rpx;
				color: #34302D;
				line-height: 42rpx;
				font-weight: 800;
				width: 542rpx;
			}
			.m-hotel-price{
				font-size: 40rpx;
				color: #DE2C38;
				&::before{
					content: '￥';
					font-size: 26rpx;
				}
			}
		}
		.m-hotel-user{
			font-size: 26rpx;
			color: #34302D;
			font-weight: 800;
			font-weight: 800;
			padding-top: 10rpx;
		}
		.m-hotel-text{
			font-size: 26rpx;
			color: #34302D;
			margin-top: 10rpx;
		}
	}
}

.m-button{
	position: fixed;
	bottom: 100rpx;
	left: 25rpx;
	z-index: 10;
	width: 700rpx;
	height: 100rpx;
	background: #D3A358;
	border-radius: 12rpx 12rpx 12rpx 12rpx;
	font-size: 32rpx;
	color: #FFFFFF;
	display: flex;
	justify-content: center;
	align-items: center;
}

.m-empty{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	font-size: 26rpx;
	color: #ADAAA5;
	padding-top: 80rpx;
	image{
		width: 320rpx;
		height: 260rpx;
		margin-bottom: 25rpx;
	}
}
</style>